import React, { useEffect, useState } from 'react'
import { Input, Select, Button, Table, Drawer, Form } from 'antd'

import './SchoolList.css'
// import axios from 'axios'
import axios from '../../utils/axios'
import api from '../../api/index'
// import { useForm } from 'antd/es/form/Form'
const SchoolList = () => {
  const [tableParams, setTableParams] = useState({
    pagination: {
      current: 1,
      pageSize: 10,
    },
  })
  const [data, setData] = useState([])
  // const [data1, setData1] = useState([])
  const [open, setOpen] = useState(false)
  const [form] = Form.useForm()

  const [school_name, setName] = useState('')
  const [school_level, setLevel] = useState('')
  const [region, setRegion] = useState('')
  const handleLook = (key) => {
    setOpen(true)
    // let id = key
    console.log(key)
    let id = key
    axios.post(api.schoolApi.getSchoolById, { id }).then((res) => {
      console.log(res)
      form.setFieldsValue({
        school_name: res.data.data.school_name,
        school_code: res.data.data.school_code,
        school_type: res.data.data.school_type,
        school_level: res.data.data.school_level,
        region: res.data.data.region,
      })
    })
  }

  const onClose = () => {
    setOpen(false)
  }
  // 分页
  const handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination)
    setTableParams({
      pagination,
    })
  }

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 150,
    },
    {
      title: '学校名称',
      dataIndex: 'school_name',
      key: 'school_name',
      width: 150,
    },
    {
      title: '学校代码',
      dataIndex: 'school_code',
      key: 'school_code',
    },
    {
      title: '学校类型',
      dataIndex: 'school_type',
      key: 'school_type',
    },
    {
      title: '学校办别',
      dataIndex: 'school_level',
      key: 'school_level',
    },
    {
      title: '所属地区',
      dataIndex: 'region',
      key: 'region',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (_, record) =>
        data.length >= 1 ? (
          <a onClick={() => handleLook(record.key)}>查看</a>
        ) : null,
    },
  ]
  // const data = []
  // for (let i = 1; i <= 100; i++) {
  //   data.push({
  //     key: i,
  //     id: i,
  //     school_name: `智慧校园 ${i}`,
  //     school_code: 965003,
  //     school_type: `London, Park Lane no. ${i}`,
  //     school_level: '民办',
  //     region: '四川武侯区',
  //   })
  // }



  const getData = () => {
    axios.get(api.schoolApi.getAllShool).then((res) => {
      // console.log('获取的学校数据', res)
      let result = []
      res.data.data.map((item) => {
        result.push({
          id: item.id,
          school_name: item.school_name,
          school_code: item.school_code,
          school_type: item.school_type,
          school_level: item.school_level,
          region: item.region,
          key: item.id,
        })
      })
      setData(result)
    })
  }
  // getData()
  useEffect(() => {
    getData()
  }, [])

  const handleSelect = (value) => {
    console.log('地区', value)
    setRegion(value)
  }
  const handleSelect1 = (value) => {
    // console.log('办别', value)
    setLevel(value)
  }
  const handValue = (e) => {
    // console.log(e)
    setName(e.target.value)
  }
  const submit = () => {
    console.log(school_name)
    axios
      .post(api.schoolApi.getSearch, { school_name, school_level, region })
      .then((res) => {
        console.log(res.data.data)
        let result = []
        res.data.data.map((item) => {
          result.push({
            id: item.id,
            school_name: item.school_name,
            school_code: item.school_code,
            school_type: item.school_type,
            school_level: item.school_level,
            region: item.region,
            key: item.id,
          })
        })

        setData([])
        setData(result)
      })
  }

  return (
    <>
      <div className="top">
        <Input onChange={handValue} placeholder="请输入学校名称或代码" />
        <div>
          <label htmlFor="">地区：</label>
          <Select
            onChange={handleSelect}
            defaultValue="请选择"
            style={{
              width: 120,
            }}
            options={[
              {
                value: '武侯区',
                label: '武侯区',
              },
              {
                value: '成华区',
                label: '成华区',
              },
            ]}
          />
        </div>
        <div>
          <label htmlFor="">学校办别：</label>
          <Select
            onChange={handleSelect1}
            defaultValue="请选择"
            style={{
              width: 120,
            }}
            options={[
              {
                value: '公办',
                label: '公办',
              },
              {
                value: '民办',
                label: '民办',
              },
            ]}
          />
        </div>
        <Button type="primary" onClick={submit}>
          查询
        </Button>
      </div>
      <div className="table">
        <Table
          columns={columns}
          dataSource={data}
          pagination={tableParams.pagination}
          onChange={handleTableChange}
          scroll={{
            y: 440,
          }}
        />
      </div>
      <Drawer
        width={500}
        title="查看学校"
        placement="right"
        onClose={onClose}
        open={open}>
        <Form
          form={form}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          autoComplete="off">
          <Form.Item label="学校名称" name="school_name">
            <Input disabled />
          </Form.Item>
          <Form.Item label="学校代码" name="school_code">
            <Input disabled />
          </Form.Item>

          <Form.Item label="学校类型" name="school_type">
            <Input disabled />
          </Form.Item>
          <Form.Item label="学校办别" name="school_level">
            <Input disabled />
          </Form.Item>
          <Form.Item label="所属地区" name="region">
            <Input disabled />
          </Form.Item>
        </Form>
      </Drawer>
    </>
  )
}

export default SchoolList
